<template>
  <div class="MakePopup">
    <div class="content" @click.stop="stop">
      <div class="close">
        <i class="iconfont icon-guanbi" @click.stop="hide"></i>
      </div>
      <div class="title">
        该日未完成阅读
      </div>
      <div class="desc">
        {{content}}
      </div>
      <div class="Make" v-if="item.total_coupon>0&&item.can_delay_clock !== 0 ">
        <div class="left">
          <span><i class="iconfont icon-xuanzhong"></i></span>已选择：补学劵 x1
        </div>
        <div class="right">
          共有{{item.total_coupon}}张可使用
        </div>
      </div>
      <div class="Vipfooter">
        <p v-if="item.balance_enough === 0"><i class="iconfont icon-zhuyi"></i>好友购买成功即可兑换补学券</p>
        <div class="btn">
          <btn :obj='btnstyle' :text="textbtn" v-on:statr="Make()"></btn>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import btn from '../../components/btn/index'

  export default {
    name: "index",
    props: ['item'],
    data: function () {
      return {
        btnstyle: {
          backgroundColor: '#ffd000',
          width: '80%',
          color: '#66440a',
          opacity: 1
        },
        content: '你可以通过补学券完成补阅读，下次记得按时完成阅读哦～',
        textbtn: '获取补学券',
      }
    },
    mounted: function () {
      if (this.item.can_delay_clock === 1 && this.item.need_delay_clock === 1) {
        if (this.item.is_newer === 1) {
          this.content = '该天未正常进行阅读，你可以通过补学券进行补阅读，补阅读需在' + this.item.max_delay_day + '天内完成，逾期不可再补！'
        } else {
          this.content = '你可以通过补学券完成补阅读，下次记得按时完成阅读哦～'
        }
        if (this.item.total_coupon > 0) {
          this.textbtn = '立即使用'
        } else if (this.item.balance_enough === 1) {
          this.textbtn = '兑换补学券'
        } else if (this.item.balance_enough === 0) {
          this.textbtn = '邀请好友获取补学券'
        }
      } else if (this.item.can_delay_clock === 0 && this.item.is_newer === 1) {
        this.content = '您当天未完成阅读，' + this.item.max_delay_day + '天补阅读期限已过，无法进行补阅读。'
        this.textbtn = '确定'
      } else if (this.item.is_newer === 1 && this.item.can_delay_clock === 1 && this.item.balance_enough === 0) {
        this.content = '该天未正常进行阅读，你可以通过补学券进行补阅读，补阅读需在' + this.item.max_delay_day + '天内完成，逾期不可再补！'
        this.textbtn = '邀请好友获取补学券'
      }

    },
    methods: {
      hide: function () {
        this.$emit('hide')
      },
      stop: function (e) {
        if (e && e.stopPropagation) {
          e.stopPropagation();
        } else {
          window.event.cancelBubble = true
        }
        return false
      },
      Make: function () {
        if (this.item.can_delay_clock === 1 && this.item.need_delay_clock === 1) {
          if (this.item.is_newer === 0) {
            if (this.item.total_coupon > 0) {
              this.$emit('Make')
            } else {
              this.$emit('go', 'Voucher')
            }
          } else {
            if (this.item.total_coupon > 0) {
              this.$emit('Make')
            } else if (this.item.balance_enough === 1) {
              this.$emit('go', 'Voucher')
            } else if (this.item.balance_enough === 0) {
              this.$emit('go', 'NewPromotion')
            }
          }
        } else if (this.item.can_delay_clock === 0 && this.item.is_newer === 1) {
          this.$emit('hide')
        }
      }
    },
    components: {btn}
  }
</script>

<style scoped>
  @import "./css/index.css";
</style>
